<template>
  <div class="tree-select" v-if="treeSelectList">
    <!-- 左侧选择区域 -->
    <div class="left">
        <div
          :class="['left-select-item', i === index ? 'active' : '']"
          v-for="(item, i) in treeSelectList"
          :key="i"
          @click="updateIndex(i)"
        >
            <section>
                <van-image
                  width="18"
                  height="18"
                  fit="cover"
                  position="center"
                  class="img"
                  :src="item.image_url"
                />
                <span class="text">{{ item.name }}</span>
            </section>
            <section>
                <span class="count">{{ item.count }}</span>
                <van-icon name="arrow" color="#ccc" size="16" />
            </section>
        </div>
    </div>

    <!-- 右侧选择区域 -->
    <div class="right">
        <div class="right-select-item"
          v-for="item in treeSelectList[index].sub_categories"
          :key="item.id"
          @click="$emit('updateSort', item.name)"
        >
            <span class="sort">{{ item.name }}</span>
            <span class="count">{{ item.count }}</span>
        </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue'
defineProps({
  treeSelectList: {
    type: Array,
    default: () => ([])
  }
})
const index = ref(0)
const updateIndex = i => {
  index.value = i
}
</script>

<style scoped lang="less">
.tree-select {
    height: 750px;
    display: flex;
    .left {
        flex: 1;
        background-color: #f5f5f5;
        .left-select-item {
            display: flex;
            justify-content: space-between;
            height: 82px;
            padding: 0 24px;
            line-height: 84px;
            .img {
                vertical-align: middle;
            }
            .text {
                margin-left: 20px;
                color: #666;
                font-size: 28px;
            }
            .count {
                padding: 0 4px;
                margin-right: 10px;
                background-color: #ccc;
                color: #fff;
                font-size: 24px;
                border-radius: 14px;
                vertical-align: middle;
            }
        }
        .active {
            background-color: #fff;
        }
    }

    .right {
        flex: 1;
        background-color: #fff;
        .right-select-item {
            display: flex;
            justify-content: space-between;
            height: 82px;
            padding: 0 24px;
            border-bottom: 2px solid #e4e4e4;
            color: #666;
            font-size: 28px;
            line-height: 82px;
        }
    }
}
</style>
